<template>
  <div>
    <a-list :grid="{ gutter: 34, column: 1 }" :loading="isLoading" :data-source="data" :pagination="pagination">
      <a-list-item slot="renderItem" slot-scope="item, index" class="column-space">
        <template>
          <div class="list-item">
            <a-list-item-meta>
              <div slot="title" class="flex header">
                <div>
                  <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.resourceImage" alt="vedio" class="image">
                  <img src="../../assets/hot.png" class="hot-img">
                </div>
                <div class="item-title-live">
                  <div class="flex flex-between">
                    <div class="title-text-live" :title="item.resourceName">
                      {{ item.resourceName }}
                    </div>
                    <a-button type="primary" icon="download">
                      <a :download="item.resourceName" :href="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.resourceUrl" style="color: #fff">
                        下载
                      </a>
                    </a-button>
                  </div>
                  <div class="footer-presenter-live">
                    <span>发布人：</span>
                    <span>{{item.resourceUserName}}</span>
                  </div>
                </div>
              </div>
            </a-list-item-meta>
            <div class="flex item-footer">
              <div>
                <span>上传时间： </span>
                <span>{{item.resourceTime}}</span>
              </div>
              <div class="flex">
                <div class="flex margin-live">
                  <template v-if="item.isCollected">
                    <div class="flex collect" @click="cancelCollect(item)">
                      <a-icon type="star" theme="filled" :style="{color: '#1bcbb4'}" class="icon-star"/>
                      <span class="collect-text" :style="{color: '#1bcbb4'}">收藏</span>
                    </div>
                  </template>
                  <template v-else>
                    <div class="flex collect" @click="collect(item)">
                      <a-icon type="star"  class="icon-star"/>
                      <span class="collect-text">收藏</span>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import {cancelCollectResource, collectResource, getCatList} from "@/api";

  const data = [];
  export default {
    name: "LivePreview.vue",
    data(){
      return{
        data,
        pagination: {
          total: 0,
          defaultPageSize: 10,
          showTotal: total => `共 ${total} 条数据`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '15', '20'],
          onChange:(page,pageSize)=>this.getList(page,pageSize),//点击页码事件
        },
        userName : window.localStorage.getItem('userName'),
      }
    },
    created() {
      //列表查询
      this.getList()
    },
    methods: {
      getList(pageNum=1, pageSize=20) {
        this.userName = window.localStorage.getItem('userName')
        this.isLoading = true
        this.pageNum = pageNum
        let params = {
          pageNum: pageNum,
          pageSize: pageSize,
          categoryId: 3,
          userName : this.userName
        }
        getCatList(params)
          .then((res) => {
            if (res.status == 200){
              console.log('get', res)
              this.data = res.data.list
              this.pagination.total = res.data.total
              this.isLoading = false
            }
            else{
              this.$message.info(res.msg)
            }
          })
      },
      //收藏资源
      collect(item) {
        let params = {
          resourceId: item.resourceId,
          userName: window.localStorage.getItem('userName')
        }
        collectResource(params)
            .then((res) => {
              if (res.status == 200){
                this.$message.success('收藏成功！')
                this.getList()
              }
              else{
                this.$message.info(res.msg)
              }
            })
      },
      //取消收藏
      cancelCollect(item) {
        let params = {
          resourceId: item.resourceId,
          userName: window.localStorage.getItem('userName')
        }
        cancelCollectResource(params)
            .then((res) => {
              if (res.status == 200){
                this.$message.success('取消收藏成功！')
                this.getList()
              }
              else{
                this.$message.info(res.msg)
              }
            })
      },
    }
  }
</script>

<style scoped>
  .flex{
    display: flex;
    flex-direction: row;
  }
  .header{
    /*justify-content: space-between;*/
    align-items: center;
  }
  .column-space{
    margin-top: 12px;
  }
  .list-item{
    border-radius: 4px;
    border: solid 2px #eeeeee;
    padding: 5px;
    cursor: pointer;
    background-color: #ffffff;
  }
  .list-item:hover{
    border: solid 2px #1bcbb4;
    box-shadow: 2px 2px 20px #dddddd;
  }
  .decoration{
    font-size: 12px;
    color: #666666;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .footer-presenter{
    color: #222222;
    font-weight: 600;
  }
  .hot-img{
    position: absolute;
    top: 0px;
    left: 17px;
  }
  .item-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5px;
  }
  .title-text{
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    width: 150px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .title-width{
    width: 155px;
  }
  .collect{
    align-items: center;
  }
  .collect-text{
    font-family: MicrosoftYaHei;
    font-size: 11px;
    color: #666666;
    margin-left: 3px;
  }
  .collect-text:hover{
    color: #1bcbb4;
  }
  .item-footer{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #666666;
    border-top: 1px dashed #eaeaea;
    justify-content: space-between;
    padding: 5px;
  }
  .flex-between{
    justify-content: space-between;
    justify-items: center;
  }
  .image{
    width: 100px;
    height: 128px;
  }
  .icon-star{
    font-size: 13px;
  }
  .title-text-live {
    margin-left: 20px;
    font-size: 15px;
    font-weight: bold;
  }
  .item-title-live {
    width: 100%;
  }
  .footer-presenter-live {
    text-align: left;
    margin-left: 20px;
  }


</style>
